<template>
	<view>
		<uni-nav-bar left-icon="back" backgroundColor='#ffffff00' border=0 color='#ffffff' statusBar="true" title="老师介绍"></uni-nav-bar>
		<view class="header">
			<viwe class='avatarOuter'>
				 <view :style="'background-image:url('+TeacherInfo.image+')'" class="avatar"></view>
			</viwe>
			<view class="uInfo">
				<view class="name">{{TeacherInfo.name}}</view>
				<view class="pos">{{TeacherInfo.typeIntroduce}}</view>
				<view class="shortHr"></view>
				<view class="tags">
					<view v-for="itm in TeacherInfo.tags">{{itm}}</view>
				</view>
			</view>
		</view>
		
		<view class="detail">
			<view class="tab">
				<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">个人简介 <view :class="tabIndex==0?'active':''"></view></view>
				<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">在授课程 <view :class="tabIndex==1?'active':''"></view></view>
			</view>
		</view>
		
		<view v-if="tabIndex==0" style="background-color: white;">
			<view>
				<view class="h2">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/jianjie@2x.png" class="icon" />
					教师介绍</view>
				<view class="content">
					{{TeacherInfo.introduce}}
				</view>
			</view>
			<view>
				<view class="h2">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/jingyan@2x.png" class="icon" />
					授课经验</view>
				<view v-for='itm in TeacherInfo.experiences'  class="content" style="padding: 0 20px;">
					<text style="color:#ff9731;font-weight: bold;font-size:40rpx;margin-right: 7px;">·</text>  {{itm}}
				</view>
			</view>
		</view>
		
		<view v-if="tabIndex==1" style="background-color: white;">
			<view>
				<view class="h2">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/kecheng@2x.png" class="icon"></image>
					全部课程</view>
			</view>
			<view class="courseList" v-for='itm in TeacherInfo.classInfo' @click="jumpTo1(itm.id)">
				<view class="cimg" :style="'background:url('+itm.image+');background-size: cover;'"  ></view>
                <view class="cdetail">
					<view style="height:70%;"><text class="title">{{itm.className}}</text><text class="count">已有{{itm.number}}人报名</text></view>
				    <view>
						<text class="openTime">开课时间：{{itm.startTimes}}</text>
					    <text class="point colorRed">￥{{itm.price}}</text>
						<!-- <text class="point colorRed" v-else>已报名此课程</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				name:'陈松老师',
				pos:'书法老师',
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/2.png',
				tags:['书法老师','教龄10年'],
				brief:'书道虽苦，乐在其中，从事书法教学辅导学生创作作品 形成了用笔丰富精到，线条摆动飘逸，结体自然大方， 险中求稳，篇幅从容清雅，笔墨酣畅如行云流水之书 风。指导学生进行书法创作屡获国际书画大赛、全国书 画大赛优异成绩。',
				honor:['2010年成为夕阳红老年学堂老师，10年书法教学经验','指导学生书法创作屡获国际、全国书画大赛优异成绩'],
				course:[{
					title:'书法班',
					count:21,
					point:150,
					openTime:'2021.09.06',
					hadApply:0,
					cimg:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/1.png',
				},{
					title:'绘画班',
					count:21,
					point:150,
					openTime:'2021.10.20',
					hadApply:1,
					cimg:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/2.png',
				}],
				id:'',
				TeacherInfo:''
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.id = option.id
			this.getTeacherInfo()
		},
		methods: {
			jumpTo1(id){
				uni.navigateTo({
					url: 'course_detail?id='+id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			chgTab(index){
				this.tabIndex = index;
			},
			getTeacherInfo(){
				const data = {
					id:this.id
				}
				this.$api.getTeacherInfo(data).then(res => {
					if(res.data.success){
						console.log(res.data.dataMap)
						this.TeacherInfo = res.data.dataMap
					}
				})
			}
		}
	}
</script>

<style lang="scss">
  .content{padding:10px 20px;color:gray;}
  page{background: url() no-repeat;background-size:contain;}
  .header{
	  .avatarOuter{
		  flex:1;
		  display: flex;
		  margin-right: 10px;
		  justify-content: right;
	  }
	  height: 500rpx;
	  padding-top:20px;
	  display: flex;
	  .avatar{
		  background-repeat: no-repeat;
		  width:70%;
		  border-radius: 15px;
		  background-size:cover;
		  height: 300rpx;
		  margin:0 auto;
	  }
	  .uInfo{
		  flex:1;
	      text-align:left;
		  color:white;
		  line-height: 35px;
		  .name{font-weight: bold;font-size:40rpx;}
		  .pos{}
		  .tags{
			  view{background:rgba(255,255,255,0.3);line-height:25px;border-radius:3px;width:80px;font-size:12px;text-align: center;margin-bottom: 5px;}
		  }
		}
  }
  
  .detail{
	  border-radius: 30px 30px 0 0;
	  margin-top: -85px;
	  background: white;
  }
  .tab{
  	 display: flex;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  .courseList{
	  display: flex;
	  padding:10px;
	  border-bottom: 1px solid #efefef;
	  .cimg{
		flex:1;
	  	width:100%;
	  	height: 150rpx;
	  	border-radius: 14rpx;
	  }
	  .cdetail{
		  padding:0 20rpx;
		  flex:2;
		  view{
			  .title{font-weight: bold;}
			  .openTime{color: gray;font-size: 12px;}
			  .count{color:gray;}
			  display: flex;
			  justify-content: space-between;
		  }
	  }
  }
</style>
